<template>
  <!--  数据报表-->
  <div class="box-view">
    <el-row :gutter="5">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <el-form ref="form" :model="form" label-width="100px" label-suffix=":">
          <el-tabs v-model="activeName " type="border-card" @tab-click="handleClick">
            <el-tab-pane name="first" label="地质灾害统计">
              <el-radio-group v-model="firstModel" style="margin-bottom: 30px;" @change="changeFirstModel">
                <el-radio-button label="first_first">地质灾害数量统计</el-radio-button>
                <el-radio-button label="first_second">地质灾害风险等级分布</el-radio-button>
              </el-radio-group>
              <div v-if="firstModel === 'first_first'">
                <el-button icon="el-icon-download" class="common_btn-defalut"
                           style="margin-bottom: 10px;margin-left: 20px"
                           @click="downloadDeptDamageStatus">下载当前报表
                </el-button>
                <template>
                  <el-table border height="79vh" :data="damageStatusList" stripe key="one" >
                    <el-table-column label="序号"  width="40">
                      <template slot-scope="scope">
                        {{ getIndex(scope.$index) }}
                      </template>
                    </el-table-column>
                    <el-table-column type="expand" label="展开" min-width="100">
                      <template slot-scope="props">
                        <el-table :data="props.row.roadList" style="width: 100%">
                          <el-table-column align="center" prop="roadName" label="灾害类型名称"
                                           min-width="150"></el-table-column>
                          <el-table-column align="center" prop="slopeCount" label="地质灾害总数"
                                           min-width="80"></el-table-column>
                          <el-table-column align="center" prop="count0" label="未评定" min-width="50"></el-table-column>
                          <el-table-column align="center" prop="count4" label="一级(重大)" min-width="50"></el-table-column>
                          <el-table-column align="center" prop="count3" label="二级(较大)" min-width="50"></el-table-column>
                          <el-table-column align="center" prop="count2" label="三级(一般)" min-width="50"></el-table-column>
                          <el-table-column align="center" prop="count1" label="四级(低)" min-width="50"></el-table-column>
                        </el-table>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="deptName" label="子级单位" min-width="150"></el-table-column>
                    <el-table-column sortable align="center" prop="slopeCount" label="地质灾害总数"
                                     min-width="80"></el-table-column>
                    <el-table-column sortable align="center" prop="count1" label="崩塌" min-width="50"></el-table-column>
                    <el-table-column sortable align="center" prop="count2" label="滑坡" min-width="50"></el-table-column>
                    <el-table-column sortable align="center" prop="count3" label="泥石流" min-width="50"></el-table-column>
                    <el-table-column sortable align="center" prop="count4" label="沉陷与塌陷"
                                     min-width="50"></el-table-column>
                    <el-table-column sortable align="center" prop="count5" label="水毁" min-width="50"></el-table-column>
                  </el-table>
                </template>
              </div>
              <div v-else-if="firstModel === 'first_second'">
                <el-button icon="el-icon-download" class="common_btn-defalut"
                           style="margin-bottom: 10px;margin-left: 20px"
                           @click="downloadRoadTypeDamageCount">下载当前报表
                </el-button>
                <el-table height="65vh" stripe :data="queryRoadTypeDamageCountList" border style="width: 100%;" key="second" >
                  <el-table-column   fixed="left" label="序号" width="40">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column  fixed="left"  align="center" prop="deptName" label="子级单位" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="slopeCount" label="地质灾害总数" width="60"></el-table-column>
                  <el-table-column align="center" label="高速公路">
                    <el-table-column label="总数" align="center" width="65">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.sumCount}}
                      </template>
                    </el-table-column>
                    <el-table-column label="未评定" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.count1}}
                      </template>
                    </el-table-column>
                    <el-table-column label="一级(重大)" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.count5}}
                      </template>
                    </el-table-column>
                    <el-table-column label="二级(较大)" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.count4}}
                      </template>
                    </el-table-column>
                    <el-table-column label="三级(一般)" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.count3}}
                      </template>
                    </el-table-column>
                    <el-table-column label="四级(低)" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType1.count2}}
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="国省干线">
                    <el-table-column label="总数" align="center" width="65">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.sumCount}}
                      </template>
                    </el-table-column>
                    <el-table-column label="未评定" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.count1}}
                      </template>
                    </el-table-column>
                    <el-table-column label="一级(重大)" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.count5}}
                      </template>
                    </el-table-column>
                    <el-table-column label="二级(较大)" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.count4}}
                      </template>
                    </el-table-column>
                    <el-table-column label="三级(一般)" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.count3}}
                      </template>
                    </el-table-column>
                    <el-table-column label="四级(低)" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType2.count2}}
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="农村公路">
                    <el-table-column label="总数" align="center" width="65">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.sumCount}}
                      </template>
                    </el-table-column>
                    <el-table-column label="未评定" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.count1}}
                      </template>
                    </el-table-column>
                    <el-table-column label="一级(重大)" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.count5}}
                      </template>
                    </el-table-column>
                    <el-table-column label="二级(较大)" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.count4}}
                      </template>
                    </el-table-column>
                    <el-table-column label="三级(一般)" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.count3}}
                      </template>
                    </el-table-column>
                    <el-table-column label="四级(低)" align="center" width="80">
                      <template slot-scope="scope">
                        {{scope.row.slopeType3.count2}}
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table>

              </div>
            </el-tab-pane>
            <el-tab-pane name="second" label="年度信息统计">
              <el-radio-group v-model="secondModel" style="margin-bottom: 30px;" @change="changeSecondModel">
                <el-radio-button label="second_first">新增风险点</el-radio-button>
                <el-radio-button label="second_second">新增监测点</el-radio-button>
                <el-radio-button label="second_third">新增治理点</el-radio-button>
              </el-radio-group>
              <div v-if="secondModel === 'second_first'">
                <template>
                  <el-form-item label="开始年份" style="display: inline-block;width: 220px;margin-right: 20px">
                    <el-date-picker v-model="time" type="year" value-format="timestamp"
                                    style="width: 140px;margin-right: 20px" :clearable="false"
                                    @change="queryNewDamageYearCount" placeholder="选择年份"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束年份" style="display: inline-block;width: 220px;margin-right: 20px">
                    <el-date-picker v-model="timeEnd" type="year" value-format="timestamp"
                                    style="width: 140px;margin-right: 20px" :clearable="false"
                                    @change="queryNewDamageYearCount" placeholder="选择年份"></el-date-picker>
                  </el-form-item>
                  <el-button icon="el-icon-download" class="common_btn-defalut"
                             style="margin-bottom: 10px;margin-left: 20px"
                             @click="downloadNewDamageYearCount">下载当前报表
                  </el-button>
                  <el-table border height="79vh" :data="queryNewDamageYearCountList" stripe>
                    <el-table-column label="序号"  width="40">
                      <template slot-scope="scope">
                        {{ getIndex(scope.$index) }}
                      </template>
                    </el-table-column>
                    <el-table-column type="expand" label="展开" min-width="100">
                      <template slot-scope="props">
                        <el-table :data="props.row.roadList" style="width: 100%">
                          <el-table-column align="center" prop="roadCode" label="路线编号"
                                           min-width="150"></el-table-column>
                          <el-table-column align="center" prop="roadName" label="路线名称"
                                           min-width="150"></el-table-column>
                          <el-table-column align="center" prop="slopeCount" label="年度新增总数"
                                           min-width="100"></el-table-column>
                          <el-table-column align="center" prop="count1" label="崩塌" min-width="50"></el-table-column>
                          <el-table-column align="center" prop="count2" label="滑坡" min-width="50"></el-table-column>
                          <el-table-column align="center" prop="count3" label="泥石流" min-width="50"></el-table-column>
                          <el-table-column align="center" prop="count4" label="沉陷与塌陷" min-width="50"></el-table-column>
                          <el-table-column align="center" prop="count5" label="水毁" min-width="50"></el-table-column>
                          <el-table-column align="center" prop="count5" label="详情" min-width="50">
                              <template slot-scope="scope">
                                <el-button type="text" class="btn_edit" @click="showInfo(scope.row.itemList)">查看详情</el-button>
                              </template>
                          </el-table-column>
                        </el-table>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="deptName" label="子级单位" min-width="150"></el-table-column>
                    <el-table-column sortable align="center" prop="slopeCount" label="年度新增总数"
                                     min-width="100"></el-table-column>
                    <el-table-column sortable align="center" prop="count1" label="崩塌" min-width="50"></el-table-column>
                    <el-table-column sortable align="center" prop="count2" label="滑坡" min-width="50"></el-table-column>
                    <el-table-column sortable align="center" prop="count3" label="泥石流" min-width="50"></el-table-column>
                    <el-table-column sortable align="center" prop="count4" label="沉陷与塌陷"
                                     min-width="50"></el-table-column>
                    <el-table-column sortable align="center" prop="count5" label="水毁" min-width="50"></el-table-column>
                  </el-table>
                </template>
              </div>
              <div v-else-if="secondModel === 'second_second'">
                <el-form-item label="开始年份" style="display: inline-block;width: 220px;margin-right: 20px">
                  <el-date-picker v-model="time" type="year" value-format="timestamp"
                                  style="width: 140px;margin-right: 20px" :clearable="false"
                                  @change="queryNewDamageMonitorYearCount" placeholder="选择年份"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束年份" style="display: inline-block;width: 220px;margin-right: 20px">
                  <el-date-picker v-model="timeEnd" type="year" value-format="timestamp"
                                  style="width: 140px;margin-right: 20px" :clearable="false"
                                  @change="queryNewDamageMonitorYearCount" placeholder="选择年份"></el-date-picker>
                </el-form-item>
                <el-button icon="el-icon-download" class="common_btn-defalut"
                           style="margin-bottom: 10px;margin-left: 20px"
                           @click="downloadNewDamageMonitorYearCount">下载当前报表
                </el-button>
                <el-table border height="79vh" :data="newDamageMonitorYearCountList" stripe>
                  <el-table-column label="序号"  width="40">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column type="expand" label="展开" min-width="100">
                    <template slot-scope="props">
                      <el-table :data="props.row.slopeList" style="width: 100%">
                        <el-table-column align="center" prop="roadCode" label="路线编号" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="name" label="线路名称" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="num" label="新增监测总数" min-width="100"></el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="deptName" label="子级单位" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="mainCount" label="新增监测总数"
                                   min-width="100"></el-table-column>

                </el-table>
              </div>
              <div v-else-if="secondModel === 'second_third'">
                <el-form-item label="开始年份" style="display: inline-block;width: 220px;margin-right: 20px">
                  <el-date-picker v-model="time" type="year" value-format="timestamp"
                                  style="width: 140px;margin-right: 20px" :clearable="false"
                                  @change="queryNewDamageProgressYearCount" placeholder="选择年份"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束年份" style="display: inline-block;width: 220px;margin-right: 20px">
                  <el-date-picker v-model="timeEnd" type="year" value-format="timestamp"
                                  style="width: 140px;margin-right: 20px" :clearable="false"
                                  @change="queryNewDamageProgressYearCount" placeholder="选择年份"></el-date-picker>
                </el-form-item>
                <el-button icon="el-icon-download" class="common_btn-defalut"
                           style="margin-bottom: 10px;margin-left: 20px"
                           @click="downloadNewDamageProgressYearCount">下载当前报表
                </el-button>
                <el-table border height="79vh" :data="queryNewDamageProgressYearCountList" stripe>
                  <el-table-column label="序号"  width="40">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column type="expand" label="展开" min-width="100">
                    <template slot-scope="props">
                      <el-table :data="props.row.slopeList" style="width: 100%">
                        <el-table-column align="center" prop="roadCode" label="路线编号" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="name" label="路线名称" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="num" label="年度新增养护治理工程总数"
                                         min-width="100"></el-table-column>

                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="deptName" label="子级单位" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="mainCount" label="年度新增养护治理工程总数"
                                   min-width="100"></el-table-column>

                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane name="third" label="正在监测或治理高风险点统计">
              <template>

                <el-button icon="el-icon-download" class="common_btn-defalut"
                           style="margin-bottom: 10px;margin-left: 20px"
                           @click="downloadRoadHighLevelDamageCount">下载当前报表
                </el-button>
                <el-table border height="79vh" :data="queryRoadHighLevelDamageCountList" stripe>
                  <el-table-column label="序号"  width="40">
                    <template slot-scope="scope">
                      {{ getIndex(scope.$index) }}
                    </template>
                  </el-table-column>
                  <el-table-column type="expand" label="展开" min-width="100">
                    <template slot-scope="props">
                      <el-table :data="props.row.roadList" style="width: 100%">
                        <el-table-column align="center" prop="roadCode" label="路线编号" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="roadName" label="路线名称" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="damageNo" label="地质灾害编号"
                                         min-width="150"></el-table-column>
                        <el-table-column align="center" prop="name" label="地质灾害名称" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="statusName" label="风险等级"
                                         min-width="150"></el-table-column>
                        <el-table-column align="center" label="是否监测" min-width="100">
                          <template slot-scope="scope">
                            {{ scope.row.count2 === 0?'否':'是' }}
                          </template>
                        </el-table-column>
                        <el-table-column align="center" label="是否治理" min-width="100">
                          <template slot-scope="scope">
                            {{ scope.row.count3 === 0?'否':'是' }}
                          </template>
                        </el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="deptName" label="子级单位" min-width="150"></el-table-column>
                  <el-table-column sortable align="center" prop="count1" label="高风险点数"
                                   min-width="100"></el-table-column>
                  <el-table-column sortable align="center" prop="count2" label="监测点数"
                                   min-width="100"></el-table-column>
                  <el-table-column sortable align="center" prop="count3" label="治理点数"
                                   min-width="100"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane name="four" label="历史信息统计">
              <el-radio-group v-model="fourModel" style="margin-bottom: 30px;" @change="changeFourModel">
                <el-radio-button label="four_first">年度结束监测</el-radio-button>
                <el-radio-button label="four_second">年度完成治理</el-radio-button>
              </el-radio-group>
              <div v-if="fourModel === 'four_first'">
                <template>
                  <el-form-item label="开始年份" style="display: inline-block;width: 220px;margin-right: 20px">
                    <el-date-picker v-model="time" type="year" value-format="timestamp"
                                    style="width: 140px;margin-right: 20px" :clearable="false"
                                    @change="queryFinishDamageMonitorYearCount" placeholder="选择年份"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束年份" style="display: inline-block;width: 220px;margin-right: 20px">
                    <el-date-picker v-model="timeEnd" type="year" value-format="timestamp"
                                    style="width: 140px;margin-right: 20px" :clearable="false"
                                    @change="queryFinishDamageMonitorYearCount" placeholder="选择年份"></el-date-picker>
                  </el-form-item>
                  <el-button icon="el-icon-download" class="common_btn-defalut"
                             style="margin-bottom: 10px;margin-left: 20px"
                             @click="downloadFinishDamageMonitorYearCount">下载当前报表
                  </el-button>
                  <el-table border height="79vh" :data="queryFinishDamageMonitorYearCountList" stripe>
                    <el-table-column label="序号"  width="40">
                      <template slot-scope="scope">
                        {{ getIndex(scope.$index) }}
                      </template>
                    </el-table-column>
                    <el-table-column type="expand" label="展开" min-width="100">
                      <template slot-scope="props">
                        <el-table :data="props.row.slopeList" style="width: 100%">
                          <el-table-column align="center" prop="roadCode" label="路线编号"
                                           min-width="150"></el-table-column>
                          <el-table-column align="center" prop="name" label="路线名称" min-width="150"></el-table-column>
                          <el-table-column align="center" prop="num" label="年度完成监测总数"
                                           min-width="100"></el-table-column>
                        </el-table>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="deptName" label="子级单位" min-width="150"></el-table-column>
                    <el-table-column sortable align="center" prop="mainCount" label="年度完成监测总数"
                                     min-width="100"></el-table-column>

                  </el-table>
                </template>
              </div>
              <div v-else-if="fourModel === 'four_second'">
                <template>
                  <el-form-item label="开始年份" style="display: inline-block;width: 220px;margin-right: 20px">
                    <el-date-picker v-model="time" type="year" value-format="timestamp"
                                    style="width: 140px;margin-right: 20px" :clearable="false"
                                    @change="queryFinishDamageProgressYearCount" placeholder="选择年份"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束年份" style="display: inline-block;width: 220px;margin-right: 20px">
                    <el-date-picker v-model="timeEnd" type="year" value-format="timestamp"
                                    style="width: 140px;margin-right: 20px" :clearable="false"
                                    @change="queryFinishDamageProgressYearCount" placeholder="选择年份"></el-date-picker>
                  </el-form-item>
                  <el-button icon="el-icon-download" class="common_btn-defalut"
                             style="margin-bottom: 10px;margin-left: 20px"
                             @click="downloadFinishDamageProgressYearCount">下载当前报表
                  </el-button>
                  <el-table border height="79vh" :data="queryFinishDamageProgressYearCountList" stripe>
                    <el-table-column label="序号"  width="40">
                      <template slot-scope="scope">
                        {{ getIndex(scope.$index) }}
                      </template>
                    </el-table-column>
                    <el-table-column type="expand" label="展开" min-width="100">
                      <template slot-scope="props">
                        <el-table :data="props.row.slopeList" style="width: 100%">
                          <el-table-column align="center" prop="roadCode" label="路线编号"
                                           min-width="150"></el-table-column>
                          <el-table-column align="center" prop="name" label="路线名称" min-width="150"></el-table-column>
                          <el-table-column align="center" prop="num" label="年度完成养护治理工程总数"
                                           min-width="100"></el-table-column>
                        </el-table>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="deptName" label="子级单位" min-width="150"></el-table-column>
                    <el-table-column sortable align="center" prop="mainCount" label="年度完成养护治理工程总数"
                                     min-width="100"></el-table-column>

                  </el-table>
                </template>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </el-col>
    </el-row>
    <x-loading v-show="isLoading"></x-loading>
    <el-dialog title="地质灾害详情" :visible.sync="showDialog" :close-on-click-modal="false" width="800px">
      <el-table border height="79vh" :data="infoList" stripe>
        <el-table-column label="序号" width="40">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="damageNo" label="地质灾害编号" min-width="150"></el-table-column>
        <el-table-column align="center" prop="name" label="地质灾害名称"
                         min-width="100"></el-table-column>
        <el-table-column align="center" prop="roadCode" label="路线编号"
                         min-width="80"></el-table-column>
        <el-table-column align="center" prop="roadName" label="路线名称"
                         min-width="80"></el-table-column>
        <el-table-column align="center" sortable label="风险等级" min-width="80">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.status| gradeDangerColor"
                    style="color: white">
              {{scope.row.statusName}}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  downloadRoadTypeDamageCount,
  downloadRoadHighLevelDamageCount,
  downloadDeptDamageStatus,
  downloadFinishDamageMonitorYearCount,
  downloadFinishDamageProgressYearCount,
  downloadNewDamageMonitorYearCount,
  downloadNewDamageProgressYearCount,
  downloadNewDamageYearCount,
  getDeptDamageStatus,
  queryFinishDamageMonitorYearCount,
  queryFinishDamageProgressYearCount,
  queryNewDamageMonitorYearCount,
  queryNewDamageProgressYearCount,
  queryNewDamageYearCount,
  queryRoadHighLevelDamageCount,
  queryRoadTypeDamageCount
} from '@/services/model/damageReport'
import OrganizationTree from '@/components/organization-tree/all'
import {getRoadSelectList} from '@/services/model/road-mgmt'
import XLoading from '@/components/animation/x-loading.vue'
import ItemMixins from "@/views/form/item.mixins";
  export default {
    components: {OrganizationTree, XLoading},
    data() {
      return {
        infoList:[],
        showDialog:false,
        firstModel: 'first_first',
        secondModel: 'second_first',
        fourModel: 'four_first',
        isLoading: false,
        queryRoadHighLevelDamageCountList: [],
        queryFinishDamageProgressYearCountList: [],
        queryFinishDamageMonitorYearCountList: [],
        queryNewDamageProgressYearCountList: [],
        queryRoadTypeDamageCountList: [],
        title: '',
        activeName: 'first',
        newDamageMonitorYearCountList: [],
        // 表单
        form: {
          roadId: ''
        },
        time: '',
        timeEnd: '',
        slopeHeightList: [],
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        deptRoadList: [],
        yangHuType: [
          {code: 1, name: '日常巡查'},
          {code: 2, name: '经常性检查'},
        ],
        timeType: [
          {code: 1, name: '年度'},
          {code: 2, name: '月度'},
          {code: 3, name: '周度'},
        ],
        damageStatusList: [],
        queryNewDamageYearCountList: [],
        slopeStatusList: [],
        slopeTechniqueYearCountList: [],
        slopeRiskYearCountList: [],
      }
    },
    mixins: [ItemMixins],
    mounted() {
      this.time = new Date().getTime() - 24 * 3600 * 1000 * 360
      this.timeEnd = new Date().getTime()
    },
    computed: {
      yangHuTypeName() {
        if (this.form.code === 1) {
          return '日常巡查'
        }
        return '经常性检查'
      },
      timeLabel() {
        if (this.form.timeType === 1) {
          return '年份'
        } else if (this.form.timeType === 2) {
          return '月份'
        } else if (this.form.timeType === 3) {
          return '日期'
        }
        return '年度'
      },
      pickerType() {
        if (this.form.timeType === 1) {
          return 'year'
        } else if (this.form.timeType === 2) {
          return 'month'
        } else if (this.form.timeType === 3) {
          return 'date'
        }
        return 'year'
      },
    },
    methods: {
      showInfo(row){
        this.infoList = row
        this.showDialog = true
      },
      changeFirstModel() {
        //地质灾害数量统计
        if (this.firstModel === 'first_first') {
          this.getDeptDamageStatus()
        } else {
          //地质灾害风险等级分布
          this.queryRoadTypeDamageCount()
        }
      },
      changeSecondModel() {
        //年度新增风险点
        if (this.secondModel === 'second_first') {
          this.queryNewDamageYearCount()
          //年度新增监测点
        } else if (this.secondModel === 'second_second') {
          this.queryNewDamageMonitorYearCount()
          //年度新增治理点
        } else {
          this.queryNewDamageProgressYearCount()
        }
      },
      changeFourModel() {
        if (this.fourModel === 'four_first') {
          //年度结束监测
          this.queryFinishDamageMonitorYearCount()
        } else {
          //年度完成治理
          this.queryFinishDamageProgressYearCount()
        }
      },
      //获取路线列表
      async roadSelect() {
        let {data} = await getRoadSelectList({deptId: this.form.deptTreeId})
        this.deptRoadList = data || []
      },
      //下载边坡高度报表
      async downloadNewDamageYearCount() {
        await downloadNewDamageYearCount(this.form)
      },
      //下载技术评定年度报表
      async downloadDeptDamageStatus() {
        await downloadDeptDamageStatus(this.form)
      },
      //下载年度新增监测点报表
      async downloadNewDamageMonitorYearCount() {
        await downloadNewDamageMonitorYearCount(this.form)
      },
      //下载年度新增治理报表
      async downloadNewDamageProgressYearCount() {
        await downloadNewDamageProgressYearCount(this.form)
      },
      //下载完成监测年度报表
      async downloadFinishDamageMonitorYearCount() {
        await downloadFinishDamageMonitorYearCount(this.form)
      },
      //下载完成治理年度报表
      async downloadFinishDamageProgressYearCount() {
        await downloadFinishDamageProgressYearCount(this.form)
      },
      async downloadRoadHighLevelDamageCount() {
        await downloadRoadHighLevelDamageCount(this.form)
      },
      async downloadRoadTypeDamageCount() {
        await downloadRoadTypeDamageCount(this.form)
      },
      handleClick() {
        //地质灾害统计
        if (this.activeName === 'first') {
          this.changeFirstModel()
          //年度信息统计
        } else if (this.activeName === 'second') {
          this.changeSecondModel()
          //正在监测或治理高风险点统计
        } else if (this.activeName === 'third') {
          this.queryRoadHighLevelDamageCount()
          this.roadSelect()
          //历史信息统计
        } else if (this.activeName === 'four') {
          this.changeFourModel()
        }
      },
      // 高风险点情况统计
      async queryRoadHighLevelDamageCount() {
        let res = await queryRoadHighLevelDamageCount(this.form)
        this.queryRoadHighLevelDamageCountList = res.data || []
      },
      //地质灾害数量统计
      async getDeptDamageStatus() {
        let deptTreeId = this.form.deptTreeId
        // let roadId = roadId
        this.form = {}
        this.form.deptTreeId = deptTreeId
        // this.form.roadId = roadId
        let res = await getDeptDamageStatus(this.form)
        this.damageStatusList = res.data || []
      },
      // 地灾点风险等级统计
      async queryRoadTypeDamageCount() {
        this.queryRoadTypeDamageCountList = []
        let res = await queryRoadTypeDamageCount(this.form)
        this.queryRoadTypeDamageCountList = res.data || []
      },
      //年度风险评估
      async queryNewDamageMonitorYearCount() {
        this.form.startCreateTime = this.time
        this.form.endCreateTime = this.timeEnd
        let res = await queryNewDamageMonitorYearCount(this.form)
        this.newDamageMonitorYearCountList = res.data || []
      },
      //年度新增风险点统计
      async queryNewDamageYearCount() {
        this.form.startCreateTime = this.time
        this.form.endCreateTime = this.timeEnd
        let res = await queryNewDamageYearCount(this.form)
        this.queryNewDamageYearCountList = res.data || []
      },
      //年度养护检查
      async queryNewDamageProgressYearCount() {
        this.form.startCreateTime = this.time
        this.form.endCreateTime = this.timeEnd
        let res = await queryNewDamageProgressYearCount(this.form)
        this.queryNewDamageProgressYearCountList = res.data || []
      },
      // 年度完成监测风险点统计
      async queryFinishDamageMonitorYearCount() {
        this.form.startCreateTime = this.time
        this.form.endCreateTime = this.timeEnd
        let res = await queryFinishDamageMonitorYearCount(this.form)
        this.queryFinishDamageMonitorYearCountList = res.data || []
      },
      // 年度新增治理风险点统计
      async queryFinishDamageProgressYearCount() {
        this.form.startCreateTime = this.time
        this.form.endCreateTime = this.timeEnd
        let res = await queryFinishDamageProgressYearCount(this.form)
        this.queryFinishDamageProgressYearCountList = res.data || []
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.handleClick()
      },
      getIndex(index) {
        let param = index + 1;
        return param;
      },
    }
  }
</script>

<style scoped="scoped" lang="less">
  /deep/ .el-table th > .cell {
    padding: 0px 0px !important;
  }

  /deep/ .el-table__expanded-cell {
    background: #d3d3d3;
  }

  .el-table {
    /deep/ .el-table {
      th {
        background-color: #0DC26B !important;
        padding: 5px !important;
      }
    }
  }
</style>
